<template>
	<view>
		<view class="animation-element-wrapper">
			<uni-transition :duration="1500" ref="ani" custom-class="transition" :mode-class="modeClass"
				:styles="styles" :show="show"><text class="text">示例元素</text></uni-transition>
		</view>

		<scroll-view class="animation-buttons" scroll-y="true">
			<view style="display: flex;flex-direction: row;">
				<button class="animation-button" @tap="goFadeOut">淡出</button>
				<button class="animation-button" @tap="goFadeIn">淡入</button>
			</view>
			<view style="display: flex;flex-direction: row;">
				<button class="animation-button" @tap="fromTopToBottom">由上至下</button>
				<button class="animation-button" @tap="fromBottomToTop">由下至上</button>
			</view>
			<view style="display: flex;flex-direction: row;">
				<button class="animation-button" @tap="fromRightToLeft">由右至左</button>
				<button class="animation-button" @tap="fromLeftToRight">由左至右</button>
			</view>
			<view style="display: flex;flex-direction: row;">
				<button class="animation-button" @tap="magnify">放大</button>
				<button class="animation-button" @tap="reduce">缩小</button>
			</view>
			<view style="display: flex;flex-direction: row;">
				<button class="animation-button" @tap="rotateLeft">向左旋转</button>
				<button class="animation-button" @tap="rotateRight">向右旋转</button>
			</view>
		</scroll-view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: true,
				modeClass: 'fade',
				styles: {},
			}
		},
		onLoad() {
			// #ifdef APP-NVUE
			this.styles = {
				justifyContent: 'center',
				alignItems: 'center',
				width: '100px',
				height: '100px',
				borderRadius: '5px',
				textAlign: 'center',
				backgroundColor: '#4cd964',
				boxShadow: '0 0 5px 1px rgba(0,0,0,0.2)',
			}
			// #endif
		},
		methods: {
			goFadeOut: function() {
				this.$refs.ani.step({
					opacity: '0',
					//rotate: '0'
				}, {
					timingFunction: 'ease-in',
					duration: 1200
				});
				// 开始执行动画
				this.$refs.ani.run(() => {
					console.log('动画支持完毕')
				});
			},
			goFadeIn: function() {
				this.$refs.ani.step({
					opacity: '1',
					//rotate: '0'
				}, {
					timingFunction: 'ease-in',
					duration: 1200
				});
				// 开始执行动画
				this.$refs.ani.run(() => {
					console.log('动画支持完毕')
				});

			},
			fromTopToBottom: function() {
				this.$refs.ani.step({
					translateY: '100px',
					//rotate: '0'
				}, {
					timingFunction: 'ease-in',
					duration: 1200
				});
				// 开始执行动画
				this.$refs.ani.run(() => {
					console.log('动画支持完毕')
				});
			},
			fromBottomToTop: function() {
				this.$refs.ani.step({
					translateY: '-100px',
				}, {
					timingFunction: 'ease-in',
					duration: 1200
				});
				// 开始执行动画
				this.$refs.ani.run(() => {
					console.log('动画支持完毕')
				});
			},
			fromRightToLeft: function() {
				this.$refs.ani.step({
					translateX: '-100px',
				}, {
					timingFunction: 'ease-in',
					duration: 1200
				});
				// 开始执行动画
				this.$refs.ani.run(() => {
					console.log('动画支持完毕')
				});
			},

			fromLeftToRight: function() {
				this.$refs.ani.step({
					translateX: '100px',
				}, {
					timingFunction: 'ease-in',
					duration: 1200
				});
				// 开始执行动画
				this.$refs.ani.run(() => {
					console.log('动画支持完毕')
				});
			},

			magnify: function() {
				this.$refs.ani.step({
					scale: '1.5',
				}, {
					timingFunction: 'ease-in',
					duration: 1200
				});
				// 开始执行动画
				this.$refs.ani.run(() => {
					console.log('动画支持完毕')
				});
			},

			reduce: function() {
				this.$refs.ani.step({
					scale: '1',
					//rotate: '0'
				}, {
					timingFunction: 'ease-in',
					duration: 1200
				});
				// 开始执行动画
				this.$refs.ani.run(() => {
					console.log('动画支持完毕')
				});
			},
			rotateLeft: function() {
				this.$refs.ani.step({
					rotate: '-90'
				}, {
					timingFunction: 'ease-in',
					duration: 1200
				});
				// 开始执行动画
				this.$refs.ani.run(() => {
					console.log('动画支持完毕')
				});
			},
			rotateRight: function() {
				this.$refs.ani.step({
					rotate: '0'
				}, {
					timingFunction: 'ease-in',
					duration: 1200
				});
				// 开始执行动画
				this.$refs.ani.run(() => {
					console.log('动画支持完毕')
				});
			}
		}
	}
</script>

<style>
	.animation-element-wrapper {
		display: flex;
		width: 750rpx;
		height: 550rpx;
		padding-top: 150rpx;
		padding-bottom: 150rpx;
		flex-direction: row;
		justify-content: center;
		overflow: hidden;
		background-color: #ffffff;
	}

	.animation-element {
		width: 200rpx;
		height: 200rpx;
		background-color: #1AAD19;
	}

	.animation-buttons {
		padding: 30rpx 0;
		width: 750rpx;
		/* height: 360rpx; */
	}

	.animation-button {
		float: left;
		width: 340rpx;
		margin: 15rpx 15rpx;
	}

	.transition {
		justify-content: center;
		align-items: center;
		width: 100px;
		height: 100px;
		border-radius: 5px;
		text-align: center;
		background-color: #4cd964;
		box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.2);
	}
</style>